import React, {Component} from 'react';
import {baseUrl} from "../../../../utiles/baseUrl";
import styles from './index.module.css'
import profileimg from '../../../../assets/头像.svg'
import {Button, Grid, Toast,Modal} from "antd-mobile";
import {withRouter} from 'react-router-dom'
import collect from '../../../../assets/收藏.svg'
import rent from '../../../../assets/home_page.svg'
import record from '../../../../assets/记录.svg'
import houst from '../../../../assets/房主.svg'
import person from '../../../../assets/个人.svg'
import connecttion from '../../../../assets/联系.svg'
import {get} from '../../../../netWork/index'
import {getToken, isLogin, removeToken} from "../../../../utiles/token";

const data = [
    {id: 0, title: '我的收藏', img: collect},
    {id: 1, title: '我的出租', img: rent},
    {id: 2, title: '看房记录', img: record},
    {id: 3, title: '成为房主', img: houst},
    {id: 4, title: '个人资料', img: person},
    {id: 5, title: '联系我们', img: connecttion},
];

const d = data.map((item, i) => ({
    icon: item.img,
    text: item.title,
}));

const alert = Modal.alert;
class MyData extends Component {
    state = {
        isLogin: isLogin(),
        userData: {
            avatar: '',
            nickname: ''
        }
    };

    //登录页面
    login = () => {
        this.props.history.push('/login')
    };

    //退出登录
    canCle = () => {
        removeToken();
        this.setState({isLogin:false})
    };

    componentDidMount() {

        if (isLogin()) {
            this.getUserData()
        } else {
            Toast.info('请登录！！', 2)
        }
    }

    //获取uer数据
    getUserData = () => {
        let value = getToken();
        // console.log(value);
        get({
            url: `/user`,
            headers: {
                authorization: value
            }
        }).then(res => {
            const {status} = res;
            // console.log(res);
            if (status === 200) {
                const {avatar, nickname} = res.body;
                this.setState({
                    userData: {
                        avatar,
                        nickname
                    }
                })
            }else {
                this.setState({
                    isLogin:false
                })
            }
        })
    };

    //点击哪个模块，进入哪个
    goModule = (el) =>{
        switch (el.text) {
            case '我的收藏':
            this.props.history.push('/housecollect');
            break;
            case '我的出租':
                this.props.history.push('/rent/rented');
                break;
            case '看房记录':
                Toast.info('暂不开放 !!!', 1);
                break;
            case '成为房主':
                this.props.history.push('/rent');
                break;
            case '个人资料':
                this.props.history.push('/housecollect');
                break;
            case '联系我们':
                Toast.info('暂不开放!!!', 1);
            break;
            default:
                return
        }
    }
    render() {
        const {isLogin, userData: {avatar, nickname}} = this.state;
        return (
            <div className={styles.root}>
                <div className={styles.head}>
                    <img className={styles.bg} src={baseUrl + '/img/profile/bg.png'} alt=""/>
                    <div className={styles.circle}>
                        <div className={styles.circle_img}>
                            <img className={styles.profileimg} src={avatar ? baseUrl + avatar : profileimg} alt=""/>
                        </div>
                        {
                            isLogin ?
                                (<div className={styles.virster}>
                                    <div className={styles.people}>{nickname}</div>
                                    <Button type="primary"
                                            size="small"
                                            style={{
                                                marginLeft:'45%',
                                                lineHeight:'20px',
                                                backgroundColor: '#00a75b',
                                                width: '40px',
                                                height:'20px',
                                                fontSize: '2px',
                                                orderRadius: '30%',
                                                padding:'2px',
                                            }}
                                            transparent={true}
                                            onClick={() =>
                                                alert('退出', '确定退出???', [
                                                    { text: '取消', onPress: null},
                                                    { text: '确定', onPress: this.canCle },
                                                ])
                                            }
                                    >退出</Button>
                                    <div className={styles.file}>编辑个人资料</div>
                                </div>)
                                : (<div className={styles.virster}>
                                    <div className={styles.people}>游客</div>

                                        <Button type="primary"
                                                size="small"
                                                style={{
                                                    marginLeft:'45%',
                                                    lineHeight:'20px',
                                                    backgroundColor: '#00a75b',
                                                    width: '40px',
                                                    height:'20px',
                                                    fontSize: '2px',
                                                    orderRadius: '30%',
                                                    padding:'2px',
                                                }}
                                                onClick={this.login}
                                        >登录</Button>
                                </div>)
                        }
                    </div>
                </div>
                <div className={styles.center}>
                    <Grid data={d}
                          hasLine={false}
                          columnNum={3}
                          itemStyle={{fontSize: '10px', marginTop: '-10px'}}
                          onClick={_el => this.goModule(_el)}
                    />
                </div>
                <div className={styles.letus}>
                    <img className={styles.joinimg} src={baseUrl + '/img/profile/join.png'} alt=""/>
                </div>
            </div>
        );
    }
}

export default withRouter(MyData);
